<template>
  <div class="notifyswitch" v-show="notifySwitchRan">
    <div class="content">
      <span class="content-title">{{$t('notify.deskNotify')}}</span>
      <div class="row" style="margin-bottom: 17px">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange" class="titile">{{$t('notify.openAllNotify')}}</el-checkbox>
        <p class="text" v-once>
          {{$t('userInfo.notifyPromt')}}
        </p>
      </div>
      <div v-for="(item, index) in notifySwitch" :key="index"
           :class="{notifyMoudle: item.value === 'cdr' || item.value === 'webchat' || item.value === 'email'
           || item.value === 'businessJoin' || item.value === 'customer' || item.value === 'monitor' || item.value === 'remoteAssistMonitor'
           || item.value === 'qcFail', busNotifyMoudle: item.value === 'business' || item.value === 'intelligentQc'}">
        <span class="notifySwitchTitle">{{item.moduleTitle}}</span>
        <el-checkbox-group v-model="checkedStatus" @change="handleCheckedCitiesChange" class="notifyCheckbox">
          <div class="row sub-row">
            <template v-if="item.isBusinessMune || item.isQcMune">
              <div class="row sub-content-row">
                <el-checkbox :label="item.value">{{item.label}}</el-checkbox>
                <p v-once>{{item.content}}</p>
              </div>
            </template>
            <template v-else-if="item.value === 'business' ">
              <el-checkbox :label="item.value" @change="changeBusiness">{{$t('notify.openItem')}}</el-checkbox>
              <p v-once>{{item.content}}</p>
            </template>
            <template v-else-if="item.value === 'intelligentQc' ">
              <el-checkbox :label="item.value" @change="changeQc">{{$t('notify.openItem')}}</el-checkbox>
              <p v-once>{{item.content}}</p>
            </template>
            <template v-else>
              <el-checkbox :label="item.value">{{$t('notify.openItem')}}</el-checkbox>
              <p v-once>{{item.content}}</p>
              <div v-if="item.value === 'cdr' || item.value === 'webchat' || item.value === 'email'">
                <p><span class="textSpan">{{$t('notify.timeLength')}}</span><el-input v-model= item.timeLength class="input" :disabled=item.iptDisable></el-input><span class="notifySeconds">{{$t('public.seconds')}}</span></p>
                <p>{{$t('notify.timeLengthRule')}}</p>
                <p><span class="textSpan">{{$t('notify.everyOther')}}</span><el-input v-model="item.spaceTimeLength" class="input" :disabled=item.iptDisable></el-input><span class="notifySeconds">{{$t('public.seconds')}}</span><span class="textSpan">{{$t('notify.notifyOneTime')}}</span></p>
                <p>{{item.textContent}}{{$t('notify.notifyNotice', {text: item.text}, {title: item.mouduleText})}}
                </p>
              </div>
            </template>
          </div>
        </el-checkbox-group>
      </div>
      <span class="content-title">{{$t('notify.titleTwinkle')}}</span>
      <div class="row notifyMoudle">
        <el-checkbox-group v-model="notifyConfig.notifyCheckBox">
          <el-checkbox v-for="(item, index) in this.notifyCheckBoxItem" :label=item.value :key=index>{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <span class="content-title">{{$t('userInfo.notifySound')}}</span>
      <div class="row" v-for="(item) in soundReminder" :key="item.value">
        <span class="notifySwitchTitle">{{item.moduleTitle}}</span>
        <el-checkbox-group v-model="checkedSoundStatus" @change="handleCheckedCitiesChange" class="notifyCheckbox">
          <div class="row sub-row">
            <template v-if="item.value === 'webchatSound' ">
              <el-checkbox :label="item.value" @change="changeWeebchatSound">{{$t('notify.openItem')}}</el-checkbox>
              <p v-once>{{item.content}}</p>
            </template>
            <template v-else>
              <div class="row sub-content-row">
                <el-checkbox :label="item.value">{{item.label}}</el-checkbox>
              </div>
            </template>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" class="primary_btn" v-once @click="updateNotifySwitch">{{$t('public.save')}}</el-button>
    </div>
  </div>
</template>

<script>
  import {deepClone, isHasFunc} from '@/utils/m7Utils.js'
  export default {
    name: 'NotifySwitch',
    data () {
      return {
        isIndeterminate: true,
        flag: this.$store.getters.isEcommerce ? true : false, // 是否是电商平台
        checkAll: true,
        notifyConfig: { // 桌面消息提醒时间
          timeLength: {cdrTimeLength: '', webchatTimeLength: '', emailTimeLength: ''}, // 通知展示时长
          spaceTimeLength: {cdr: '', webchat: '', email: ''}, // 通知时间间隔
          notifyCheckBox: [] // 窗口提醒多选框
        },
        notifyCheckBoxItem: [
          {label: this.$t('public.call'), value: 'cdr'}, {label: this.$t('public.business'), value: 'business'}, // title闪烁多选框
          {label: this.$t('monitor.online'), value: 'webchat'}, {label: this.$t('public.mail'), value: 'email'}, {label: this.$t('public.contactPlan'), value: 'customerPlan'}
        ],
        checkedStatus: ['cdr', 'webchat', 'email', 'customer', 'business', 'businessAssign', 'businessAssignToMe', 'businessClaim', 'businessAttention', 'businessTimeout', 'businessJoin', 'monitor', 'intelligentQc', 'qcExcellent', 'qcPass', 'qcFail'],
        checkBusinessStatus: ['businessAssign', 'businessAssignToMe', 'businessClaim', 'businessAttention', 'businessTimeout', 'businessJoin'],
        checkQcStatus: ['qcExcellent', 'qcPass', 'qcFail'],
        checkedSoundStatus: ['webchatSound', 'newSession', 'newMsg', 'newConn', 'disConn'],
        soundStatus: ['newSession', 'newMsg', 'newConn', 'disConn'],
        soundReminder: [
          { label: this.$t('userInfo.webchatNotify'),
            value: 'webchatSound',
            content: this.$t('userInfo.webchatSound'),
            moduleTitle: this.$t('userInfo.webchatNotify')
          },
          { label: this.$t('userInfo.newSession'),
            value: 'newSession',
          },
          { label: this.$t('userInfo.newMsg'),
            value: 'newMsg',
          },
          { label: this.$t('userInfo.newConn'),
            value: 'newConn',
          },
          { label: this.$t('userInfo.disConn'),
            value: 'disConn',
          }
        ],
        notifySwitch: [
          { label: this.$t('userInfo.callNotify'),
            value: 'cdr',
            content: this.$t('userInfo.callNotifyCont'),
            text: this.$t('notify.callModule'),
            timeLength: '',
            spaceTimeLength: '',
            textContent: this.$t('notify.callTextContent'),
            iptDisable: false,
            mouduleText: this.$t('call.cdrCall'),
            moduleTitle: this.$t('userInfo.callNotify')
          },
          { label: this.$t('userInfo.webchatNotify'),
            value: 'webchat',
            content: this.$t('userInfo.webchatNotifyCont'),
            text: this.$t('notify.webchatModule'),
            timeLength: '',
            spaceTimeLength: '',
            iptDisable: false,
            mouduleText: this.$t('call.cdrPending'),
            moduleTitle: this.$t('userInfo.webchatNotify')
          },
          { label: this.$t('userInfo.emailNotify'),
            value: 'email',
            content: this.$t('userInfo.emailNotifyCont'),
            text: this.$t('notify.emailModule'),
            timeLength: '',
            spaceTimeLength: '',
            iptDisable: false,
            mouduleText: this.$t('email.emailTodo'),
            moduleTitle: this.$t('userInfo.emailNotify')
          },
          { label: this.$t('userInfo.customerNotify'),
            value: 'customer',
            content: this.$t('userInfo.customerNotifyCont'),
            moduleTitle: this.$t('userInfo.customerNotify')
          },
          { label: this.$t('userInfo.busNotify'),
            value: 'business',
            content: this.$t('userInfo.busNotifyCont'),
            moduleTitle: this.$t('userInfo.busNotify')
          },
          { label: this.$t('userInfo.busAllotNotifyToMe'),
            value: 'businessAssignToMe',
            content: this.$t('userInfo.busAllotNotifyToMeCont'),
            isBusinessMune: true
          },
          { label: this.$t('userInfo.busAllotNotify'),
            value: 'businessAssign',
            content: this.$t('userInfo.busAllotNotifyCont'),
            isBusinessMune: true
          },
          { label: this.$t('userInfo.busReceivedNotify'),
            value: 'businessClaim',
            content: this.$t('userInfo.busReceivedNotifyCont'),
            isBusinessMune: true
          },
          { label: this.$t('userInfo.busAttentionNotify'),
            value: 'businessAttention',
            content: this.$t('userInfo.busAttentionNotifyCont'),
            isBusinessMune: true
          },
          { label: this.$t('userInfo.busTimeoutNotify'),
            value: 'businessTimeout',
            content: this.$t('userInfo.busTimeoutNotifyCont'),
            isBusinessMune: true
          },
          { label: this.$t('userInfo.busDynamicNotify'),
            value: 'businessJoin',
            content: this.$t('userInfo.busDynamicNotifyCont'),
            isBusinessMune: true
          },
          { label: this.$t('userInfo.monitorNotify'),
            value: 'monitor',
            content: this.$t('userInfo.monitorNotifyCont'),
            moduleTitle: this.$t('userInfo.monitorNotify')
          }
        ]
      }
    },
    computed: {
      _id () {
        return this.$store.state.session.sessionId
      }
    },
    watch: {
      notifySwitchRan () {
        if (this.$store.state.session && this.$store.state.session.user && this.$store.state.session.user.notifyStatus) {
          this.checkedStatus = deepClone(this.$store.state.session.user.notifyStatus)
          this.handleCheckedCitiesChange()
        } else {
          this.checkAll = true
          this.handleCheckAllChange()
        }
      }
    },
    props: {
      notifySwitchRan: Number
    },
    methods: {
      handleCheckAllChange () { // 全选
        let _array = []
        this.notifySwitch.forEach(item => {
          _array.push(item.value)
        })
        this.checkAll ? this.checkedStatus = _array : this.checkedStatus = []
        this.notifySwitch.forEach(item => { // 全选情况下输入框不禁用
          if (this.checkAll) {
            item.iptDisable = false
          } else {
            item.iptDisable = true
          }
        })
      },
      handleCheckedCitiesChange () {
        if (this.checkedStatus.length === this.notifySwitch.length) {
          this.checkAll = true
        } else {
          this.checkAll = false
        }
        if (this.checkedStatus.indexOf('cdr') > -1) { // 输入框是否禁用判断条件
          this.notifySwitch[0].iptDisable = false
        } else {
          this.notifySwitch[0].iptDisable = true
        }
        if (this.checkedStatus.indexOf('webchat') > -1) {
          this.notifySwitch[1].iptDisable = false
        } else {
          this.notifySwitch[1].iptDisable = true
        }
        if (this.checkedStatus.indexOf('email') > -1) {
          this.notifySwitch[2].iptDisable = false
        } else {
          this.notifySwitch[2].iptDisable = true
        }
        if (this.checkedStatus.indexOf('business') > -1 && this.isIncludeBusinessAllMenu(1, this.checkBusinessStatus)) {
          var index = this.checkedStatus.indexOf('business')
          this.checkedStatus.splice(index, 1)
        } else if (this.checkedStatus.indexOf('business') < 0 && this.isIncludeBusinessAllMenu(0, this.checkBusinessStatus)) {
          this.checkedStatus.push('business')
        }
        if (this.checkedStatus.indexOf('intelligentQc') > -1 && this.isIncludeBusinessAllMenu(1, this.checkQcStatus)) {
          var index2 = this.checkedStatus.indexOf('intelligentQc')
          this.checkedStatus.splice(index2, 1)
        } else if (this.checkedStatus.indexOf('intelligentQc') < 0 && this.isIncludeBusinessAllMenu(0, this.checkQcStatus)) {
          this.checkedStatus.push('intelligentQc')
        }
        if (this.checkedSoundStatus.indexOf('webchatSound') > -1 && this.isIncludeBusinessAllMenu(1, this.soundStatus, true)) {
          var index3 = this.checkedSoundStatus.indexOf('webchatSound')
          this.checkedSoundStatus.splice(index3, 1)
        } else if (this.checkedSoundStatus.indexOf('webchatSound') < 0 && this.isIncludeBusinessAllMenu(0, this.soundStatus, true)) {
          this.checkedSoundStatus.push('webchatSound')
        }
      },
      updateNotifySwitch () { // 保存浏览器提醒配置
        let flag = true // 限定条件
        this.notifySwitch.forEach(item => {
          if (item.spaceTimeLength) {
            if (item.spaceTimeLength < 0 || item.spaceTimeLength % 1 !== 0) { // 重复间隔时长input 判断
              this.$message.error(this.$t('notify.repeatTimeRuleOne'))
              item.spaceTimeLength = ''
              flag = false
              return
            }
          }
          if (item.timeLength) {
            if (item.timeLength > 30 || item.timeLength % 1 !== 0 || item.timeLength <= 0) { // 时长判断条件
              this.$message.error(this.$t('notify.showTimeLengthRule'))
              item.timeLength = ''
              flag = false
              return
            }
            if (item.value === 'cdr') {
              this.notifyConfig.timeLength.cdrTimeLength = item.timeLength
              this.notifyConfig.spaceTimeLength.cdr = item.spaceTimeLength
            } else if (item.value === 'webchat') {
              this.notifyConfig.timeLength.webchatTimeLength = item.timeLength
              this.notifyConfig.spaceTimeLength.webchat = item.spaceTimeLength
            } else if (item.value === 'email') {
              this.notifyConfig.timeLength.emailTimeLength = item.timeLength
              this.notifyConfig.spaceTimeLength.email = item.spaceTimeLength
            }
          }
        })
        if (flag) {
          let data = {
            notifyStatus: this.checkedStatus,
            _id: this._id,
            notifyConfig: this.notifyConfig,
            notifySound: this.checkedSoundStatus
          }
          console.log(data)
          this.$store.dispatch('userEdit', data).then(req => {
            if (req) {
              this.$message({
                message: this.$t('message.editSucess'),
                type: 'success'
              })
            }
          })
        }
      },
      close () {
        console.log(this.$store.state.session.user)
        this.$emit('close')
      },
      isIncludeBusinessAllMenu (type, data, isSound) {
        var isHasMenu = null
        var statusArr = this.checkedStatus
        if (isSound) {
          statusArr = this.checkedSoundStatus
        }
        if (type) {
          isHasMenu = data.every(item => {
            let statusIndex = statusArr.indexOf(item)
            let status = false
            if (statusIndex > -1) {
              status = true
            }
            return !status
          })
        } else {
          isHasMenu = data.some(item => {
            let statusIndex = statusArr.indexOf(item)
            let status = false
            if (statusIndex > -1) {
              status = true
            }
            return status
          })
        }
        return isHasMenu
      },
      changeBusiness () {
        var checkedStatus = this.checkedStatus
        var checkBusinessStatus = this.checkBusinessStatus
        var index = null
        if (checkedStatus.indexOf('business') < 0) {
          for (var i in checkBusinessStatus) {
            if (checkedStatus.indexOf(checkBusinessStatus[i]) >= 0) {
              index = checkedStatus.indexOf(checkBusinessStatus[i])
              this.checkedStatus.splice(index, 1)
            }
          }
        } else {
          this.checkedStatus = Array.from(new Set([...checkedStatus, ...checkBusinessStatus]))
        }
      },
      changeQc () {
        let checkedStatus = this.checkedStatus
        let checkQcStatus = this.checkQcStatus
        let index = null
        if (checkedStatus.indexOf('intelligentQc') < 0) {
          for (let i in checkQcStatus) {
            if (checkedStatus.indexOf(checkQcStatus[i]) >= 0) {
              index = checkedStatus.indexOf(checkQcStatus[i])
              this.checkedStatus.splice(index, 1)
            }
          }
        } else {
          this.checkedStatus = Array.from(new Set([...checkedStatus, ...checkQcStatus]))
        }
      },
      changeWeebchatSound () {
        let checkedSoundStatus = this.checkedSoundStatus
        let soundStatus = this.soundStatus
        let index = null
        if (checkedSoundStatus.indexOf('webchatSound') < 0) {
          for (let i in soundStatus) {
            if (checkedSoundStatus.indexOf(soundStatus[i]) >= 0) {
              index = checkedSoundStatus.indexOf(soundStatus[i])
              this.checkedSoundStatus.splice(index, 1)
            }
          }
        } else {
          this.checkedSoundStatus = Array.from(new Set([...checkedSoundStatus, ...soundStatus]))
        }
      }
    },
    beforeMount () {
      let notifyConfigObj = deepClone(this.$store.state.session.user.notifyConfig)
      if (this.$store.state.session && this.$store.state.session.user && this.$store.state.session.user.notifyStatus) {
        if (this.$store.state.session.user.notifyConfig) { // 根据当前保存的信息去回显
          this.notifySwitch[0].timeLength = notifyConfigObj.timeLength.cdrTimeLength
          this.notifySwitch[1].timeLength = notifyConfigObj.timeLength.webchatTimeLength
          this.notifySwitch[2].timeLength = notifyConfigObj.timeLength.emailTimeLength
          this.notifySwitch[0].spaceTimeLength = notifyConfigObj.spaceTimeLength.cdr
          this.notifySwitch[1].spaceTimeLength = notifyConfigObj.spaceTimeLength.webchat
          this.notifySwitch[2].spaceTimeLength = notifyConfigObj.spaceTimeLength.email
          if (!notifyConfigObj.notifyCheckBox) {
            this.notifyConfig.notifyCheckBox = []
          } else {
            this.notifyConfig.notifyCheckBox = notifyConfigObj.notifyCheckBox
          }
        }
        this.checkedStatus = deepClone(this.$store.state.session.user.notifyStatus)
        this.handleCheckedCitiesChange()
      } else {
        this.checkAll = true
        this.handleCheckAllChange()
      }
      
      // 提示音设置初始化
      if (this.$store.state.session && this.$store.state.session.user && this.$store.state.session.user.notifySound) {
        this.checkedSoundStatus = deepClone(this.$store.state.session.user.notifySound)
        this.handleCheckedCitiesChange()
      } else {
        this.checkAll = true
        this.handleCheckAllChange()
      }

      if (isHasFunc('func_autoqc_result_look', this.$store.state.session.user)) {
        let arr = [
          { label: this.$t('userInfo.intelligentQc'),
            value: 'intelligentQc',
            content: this.$t('userInfo.intelligentQcCont'),
            moduleTitle: this.$t('userInfo.intelligentQc')
          },
          { label: this.$t('qualityCheck.excellent'),
            value: 'qcExcellent',
            isQcMune: true
          },
          { label: this.$t('userInfo.intelligentQcPass'),
            value: 'qcPass',
            isQcMune: true
          },
          { label: this.$t('userInfo.intelligentQcFail'),
            value: 'qcFail',
            isQcMune: true
          }]
        this.notifySwitch = this.notifySwitch.concat(arr)
        console.log(this.notifySwitch)
      }
      // 电商平台
      if (this.flag) {
        this.notifySwitch = [
          { label: this.$t('userInfo.webchatNotify'),
            value: 'webchat',
            content: this.$t('userInfo.webchatNotifyCont'),
            text: this.$t('notify.webchatModule'),
            timeLength: '',
            spaceTimeLength: '',
            iptDisable: false,
            mouduleText: this.$t('call.cdrPending'),
            moduleTitle: this.$t('userInfo.webchatNotify')
          },
          { label: this.$t('userInfo.customerNotify'),
            value: 'customer',
            content: this.$t('userInfo.customerNotifyCont'),
            moduleTitle: this.$t('userInfo.customerNotify')
          },
          { label: this.$t('userInfo.monitorNotify'),
            value: 'monitor',
            content: this.$t('userInfo.monitorNotifyCont'),
            moduleTitle: this.$t('userInfo.monitorNotify')
          }
        ]
        this.notifyCheckBoxItem = [
          {label: this.$t('monitor.online'), value: 'webchat'}, {label: this.$t('public.contactPlan'), value: 'customerPlan'}
        ]
      }
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
  .notifyswitch
    .content
      margin -27px 0px 0px 21px
      .content-title
        display: inline-block
        font-weight: bold
        margin: 10px 0px
        color: #000000
        font-size 14px
      .titile
        line-height 20px
        margin-bottom 7px
      p
        line-height 20px
        color #a6a6a6
      .sub-row
        padding-top 10px
        padding-left 49px
        p
          padding-left 23px
          font-size 12px
    .sub-content-row
      padding-top 10px
      padding-left 22px
    .busNotifyMoudle
      margin-top  17px
    .notifyMoudle
      margin-bottom 17px
      border-bottom 1px solid #D8D8D8
      padding-bottom 17px
      width:600px
    .notifySwitchTitle
      font-size: 12px
      font-weight: 600
      display: inline-block
    .notifyCheckbox
      margin-left: 115px
      margin-top: -27px
      width 500px
      display inline-block
      .el-checkbox__label
        font-weight 600
    .footer
      text-align right
      margin-bottom 10px
      margin-top 30px
    .input
      width: 50px
      height: 23px
      margin: 10px 0px 10px 10px
      .el-input__inner
        border-radius 4px 0px 0px 4px
    .notifySeconds
      height: 28px
      line-height: 28px
      display: inline-block
      background-color: #f5f7fa
      color: #909399
      vertical-align: middle
      position: relative
      border: 1px solid #dcdfe6
      border-radius: 0px 4px 4px 0px
      padding: 0px 20px
      white-space: nowrap
      border-left: none
      margin-right 10px
      margin-bottom 1px
    .textSpan
      color: #000000
</style>
